<template>
<el-menu
 class="el-menu-vertical"
 :collapse="isCollapse"
  background-color="#1f2e3b"
  text-color="#fff"
  active-text-color="#409EFF"
  router=true
  unique-opened="true"
  :default-active="Active"
 >
    <template  v-for="item in menu" :key="item.admin_menu_id">
      <BasicAsideMenuItem :menu="item" />
    </template>

    <!-- <el-menu-item class="hideen_menu">
      <i class="el-icon-s-fold" v-show="isCollapse == false" @click="showMenu"></i>
      <i class="el-icon-s-unfold" v-show="isCollapse == true" @click="showMenu"></i>
    </el-menu-item> -->
</el-menu>

</template>
<script>
import { computed, getCurrentInstance } from 'vue';
import BasicAsideMenuItem from './basic-aside-menu-item';
// import BaseAsideMenuItem from './base-aside-menu-item';
export default {
  name: 'BasicAsideMenu',
  components: {
    BasicAsideMenuItem
  },
  setup() {
    const { ctx } = getCurrentInstance();
    let isCollapse = false;
    let Active =  ctx.$router.currentRoute.value.name;
    function handleOpen(key, keyPath) {
    }
    function handleClose(key, keyPath) {
    }
    function showMenu(){
      isCollapse = !isCollapse
    }
    let menu = computed(() => ctx.$store.state.roleMenus);
    return {
      handleOpen,
      handleClose,
      menu,
      isCollapse,
      showMenu,
      Active
    };
  }
};
</script>
<style scoped>
  .el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu{
    /* height: 100%; */
    border:none;
    /* padding-left:20px; */
  }
  .el-menu-item:hover{
    background-color: #021c358f;
  }
  .hideen_menu{
    position:fixed;
    bottom: 0;
    border:none;
    text-align: center;
    background-color: #2c3e50 !important;
  }
  .hideen_menu i{
    font-size: 24px;
    color: white;
  }
</style>
